<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table {
				width: 500px;
			}
			
			td {
				text-align: center;
			}
			
			.haoyou {
				width: 300px;
				height: 200px;
				border: 1px solid;
				position: absolute;
				margin-left: -150px;
				left: 50%;
				top: 50%;
			}
			
			.haoyou p {
				margin-top: 30px;
				text-align: center;
			}
			
			.haoyou p input {
				margin: 20px;
			}
			
			.huifu {
				width: 240px;
				height: 150px;
				border: 1px solid;
				position: absolute;
				margin-left: -120px;
				left: 50%;
				top: 50%;
			}
			
			.huifu p {
				margin-top: 30px;
				text-align: center;
			}
			
			.huifu p input {
				margin: 20px;
			}
			
			#addfrend {
				position: absolute;
				display: none;
			}
			
			#liao_main {
				margin: 0 auto;
				width: 700px;
				height: 500px;
				border: 1px solid;
			}
			
			#liao_main #left {
				width: 240px;
				height: 500px;
				border: 1px solid;
				margin: -1px -1px;
				float: left;
			}
			
			#liao_main #left p {
				text-align: center;
				border: 1px solid;
				margin: 10px;
				padding: 10px;
			}
			
			#left_list {
				width: 240px;
				height: 100%;
				overflow: auto;
			}
			
			#left_list div {
				text-align: center;
				border-bottom: 1px solid;
				padding: 8px 0;
			}
			
			#right {
				width: 460px;
				height: 500px;
				float: right;
			}
			
			.right_title {
				width: 460px;
				height: 60px;
				border-bottom: 1px solid;
				margin-top: -1px;
				margin-right: -1px;
				text-align: center;
				line-height: 60px;
			}
			
			.right_main {
				width: 460px;
				height: 300px;
				border-bottom: 1px solid;
				margin-top: -1px;
				overflow: auto;
				word-break: break-all;
			}
			
			.right_write {
				width: 440px;
				height: 90px;
				margin: 0 auto;
				color: #A1A1A3;
				padding: 5px 10px ;
				overflow: auto;
				word-break: break-all;
			}
			
			#right input {
				float: right;
				margin-top: -10px;
			}
			
			.right_main_right {
				float: right;
				max-width: 200px;
				margin: 5px 40px 5px 0px;
				clear: both;
				word-break: break-word;
			}
			
			.right_main_left {
				float: left;
				max-width: 200px;
				margin: 5px 0px 5px 40px;
				clear: both;
				word-break: break-word;
			}
		</style>
	</head>

	<body>
		<div id="main">
			<p>欢迎【<span id="name"></span>】</p>
			<!--<input type="text" id="text" />
			<input type="button" value="发送" onclick="fasong()" />-->
			<input type="button" value="添加" onclick="add()" />
			<div id="addfrend">
				<p><input type="text" id="searchname" /> <input type="button" value="查询" onclick="getSelfInfo()" /> </p>
				<table border="1px" cellpadding="0" cellspacing="0">
					<thead>
						<tr>
							<th>姓名</th>
							<th>性别</th>
							<th>年龄</th>
							<th>添加好友</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>

			<div id="liao_main">
				<div id="left">
					<p>好友列表</p>
					<div id="left_list"></div>
				</div>
				<div id="right">
					<!--<div id="right_title"></div>
					<div id="right_main"></div>
					<div id="right_write" contenteditable="true"></div>
					<p><input type="button" value="发送" /> </p>-->
				</div>
			</div>

		</div>
	</body>
	<script src="//cdn.socket.io/socket.io-1.4.5.js"></script>
	<script src="js/jquery-1.11.0.js"></script>
	<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
	<script src='js/jmessage-sdk-web-2.1.0.min.js'></script>
	<script src="js/url.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var JIM = new JMessage();
		var appkey = "5878e904610f77f3e4f252ee";
		var timestamp = new Date().getTime();
		var random_str = "022cd9fd995849b58b3ef0e943421ed9";
		var secret = "da9f91355f6db5400b3bb6b6";
		signature = md5_cmn(appkey, timestamp, random_str, secret);
		JIM.init({
			"appkey": "5878e904610f77f3e4f252ee",
			"random_str": "022cd9fd995849b58b3ef0e943421ed9",
			"signature": signature,
			"timestamp": timestamp
		}).onSuccess(function(data) {
			//do something
			console.log("初始化成功");
			var username = geturlitem(location.search, "username");
			var password = geturlitem(location.search, "password");
			if(username == "" || password == "") {
				location.href = "index.html";
			} else { //登录
				JIM.login({
					'username': username,
					'password': password
				}).onSuccess(function(data) {
					// do something
					console.log("登陆成功");
					getFriendList();
					JIM.onMsgReceive(function(data) {
						var right_name = data.messages[0].content.from_id;
						var right_left = data.messages[0].content.msg_body.text;
						right_left = "<div class='right_main_left'>" + right_left + "<div>";
						console.log("#right_main_" + right_name);
						if($("#right_main_" + right_name).length > 0) {
							$("#right_main_" + right_name).append(right_left);
						} else {
							var divs = '<div id="right_' + right_name + '"> <div class="right_title"  id="right_title_' + right_name + '">' + right_name + '</div>';
							divs += '<div class="right_main" id="right_main_' + right_name + '"></div>';
							divs += '<div class="right_write" id="right_write_' + right_name + '" contenteditable="true"></div>';
							divs += '<p><input class="push" type="button" value="发送" /></p></div>';
							$("#right").append(divs);
							$("#right_main_" + right_name).append(right_left);
							push(right_left);
							$("#right_" + right_name).hide();
						}

					});

					JIM.onEventNotification(function(data) {
						console.log("消息接受成功");
						console.log(data);
						if(data.extra == 1) { //添加好友请求
							$("#main").append('<div class="haoyou"><p></p><p></p><p><input class="agree" type="button" value="同意" /><input class="disagree" type="button" value="取消" /></p></div>');
							$(".haoyou p").eq(0).html("来自" + data.from_username + "的好友添加申请");
							$(".haoyou p").eq(1).html(data.description);
							$(".agree").click(function() {
								$(".haoyou").remove();
								addFriend(data.from_username, "2");
								getFriendList();
							})
							$(".disagree").click(function() {
								$(".haoyou").remove();
								addFriend(data.from_username, "2", "no");
							})
						} else if(data.extra == 2) { //添加好友恢复
							$("#main").append('<div class="huifu"><p>1</p><p><input class="queding" type="button" value="同意" /></p></div>');
							if(data.description == "") {
								$(".huifu p").eq(0).html("对方已同意");
								getFriendList();
							} else {
								$(".huifu p").eq(0).html("对方已拒绝");
							}
							$(".queding").click(function() {
								$(".huifu").remove();
							})
						}

					});
					$("#name").html(username);
				}).onFail(function() {
					console.log("登陆失败");
				});
			}
		}).onFail(function(data) {
			// do something
			console.log("初始化失败");
		})

		function fasong(content, username) { //发送消息给对方
			var content = content;
			JIM.sendSingleMsg({
				'target_username': username,
				'target_nickname': '',
				'content': content,
				'appkey': '',
				'extras': ''
			}).onSuccess(function(data) {
				console.log("发送成功");
				console.log(data);
			}).onFail(function(data) {
				console.log(data);
			});

		}

		function getSelfInfo() { //添加好友
			var name = $("#searchname").val();
			JIM.getUserInfo({
				'username': name
			}).onSuccess(function(data) {
				console.log("查询成功")
				console.log(data);
				var tr = "<tr><td>" + (data.user_info.username ? data.user_info.username : '') + "</td><td>";
				tr += (data.birthday ? data.birthday : '') + "</td><td>";
				tr += (data.gender ? data.gender : '') + "</td><td>";
				tr += "<input type='button' id='tianjia' value='添加'/></td></tr>";
				$("table tbody").html(tr);
				$("#tianjia").click(function() {
					addFriend(name, "1", "加个好友吧")
				})
			}).onFail(function(data) {});

		}

		function addFriend(name, num, why) { //好友添加请求
			JIM.addFriend({ 'target_name': name, 'from_type': num, 'why': why }).onSuccess(function(data) {
				console.log("添加发送成功");
				console.log(data);
				getFriendList();
				$("#addfrend").hide();
			}).onFail(function(data) {
				console.log(data);
			});
		}

		function getFriendList() { //打印好友列表
			JIM.getFriendList().onSuccess(function(data) {
				console.log("创建好友列表成功");
				console.log(data);

				$("#left_list").html("");

				for(var i = 0; i < data.friend_list.length; i++) {
					(function(index) {
						var idname = data.friend_list[index].username;
						console.log(idname)
						$("#left_list").append("<div id=" + idname + ">" + idname + "</div>");
						//添加点击事件
						$("#" + idname).click(function() {
							$("#right").children().hide();
							if($("#right_" + idname).length > 0) {
								$("#right_" + idname).show();
							} else {
								var divs = '<div id="right_' + idname + '"> <div class="right_title"  id="right_title_' + idname + '">' + $(this).html() + '</div>';
								divs += '<div class="right_main" id="right_main_' + idname + '"></div>';
								divs += '<div class="right_write" id="right_write_' + idname + '" contenteditable="true"></div>';
								divs += '<p><input class="push" type="button" value="发送" /></p></div>';
								$("#right").append(divs);
								push(idname);
							}
						})
					})(i)
				}

			}).onFail(function(data) {
				console.log(data);
			});
		}

		function push(idname) { //发送消息
			$(".push").click(function() {
				var neirong = $(this).parent().parent().children().eq(2).html();
				var username = idname;
				fasong(neirong, username)
				neirong = "<div class='right_main_right'>" + neirong + "<div>";
				$(this).parent().parent().children().eq(1).append(neirong);
				$(this).parent().parent().children().eq(2).html("");
				
				$("#right_main_" + username)[0].scrollTop=$("#right_main_" + username)[0].scrollHeight;
			})
		}

		function add() {
			$("#searchname").val("");
			$("table tbody").html('');
			$("#addfrend").show();
		}
	</script>

</html>